import { Button } from 'antd';

function fetchData() {
  console.log('fetch');
}

export default ({ items, onSayHi }) => {

  const sayHi = (name) => {
    onSayHi(name);
  }

  return (
    <div>
      <h3>Sub Component</h3>
      <h5>{items.length}</h5>
      {items.map(item => {
        return (<div>
          <Button onClick={() => fetchData()}>Fetch {item}</Button>
          <Button onClick={() => sayHi(item)}>SayHi {item}</Button>
        </div>);
      })}
    </div>
  );
};
